<template>
  <div ref="content" class="content">
    <full-page ref="fullpage" id="fullpage" :options="options" :skip-init="true">
      <div class="section section1">
        <Home></Home>
        <BannerImage ref="bannerImage"></BannerImage>
      </div>
      <div class="section section2">
        <About ref="about"></About>
      </div>
      <div class="section section3">
        <Skill ref="skill"></Skill>
      </div>
      <div class="section section4">
        <Experience ref="experience"></Experience>
      </div>
      <div class="section section5">
        <Works ref="works"></Works>
      </div>
      <div class="section section6">
        <ContactMe ref="contactme"></ContactMe>
      </div>
    </full-page>
    <div>
      <Navigation @page="page" ref="navigation"></Navigation>
    </div>
  </div>
</template>

<script>
// nav 导航栏组件
import Navigation from '../navigation/navigation'
// home 首页组件
import Home from '../home/home'
// 第一张背景轮播
import BannerImage from '../bannerImage/bannerImage'

import About from '../about/about'

import Skill from '../skill/skill'

import Experience from '../experience/experience'

import Works from '../works/works'

import ContactMe from '../contactMe/contactMe'

// import Bscroll from 'better-scroll'

import { mapState } from 'vuex'

export default {
  name: 'v-content',
  data () {
    return {
      pageY: 0,
      flag: true,
      index: 0,
      options: {
        // sectionsColor: ['#090909', '#0fba3b', 'rgba(142, 147, 49, .7)', 'rgba(242, 47, 49, .7)', 'rgba(242, 147, 249, .7)', 'rgba(42, 247, 249, .7)'],
        scrollBar: false,
        controlArrows: true,
        scrollingSpeed: 500,
        touchSensitivity: 100,
        lockAnchors: true,
        afterLoad: this.afterLoad
      }
    }
  },
  mounted () {
    // this.click()
    this.resize()
  },
  methods: {
    click () {
      // console.log(this.$refs.fullpage)
      this.$refs.fullpage.init()
    },
    page (index) {
      // navigation 点击圆点跳到指定页面
      this.$refs.fullpage.api.moveTo(index)
    },
    afterLoad (origin, destination) {
      // 每次滚动到哪一个页面navigation图标的active也在那一个索引
      this.$refs.navigation.afterActive(destination.index)

      switch (destination.index) {
        case 0:
          // 来到第一张开启背景轮播
          this.$refs.bannerImage.setIntervalImage()
          break
        case 1:
          // 离开第一张关闭背景轮播
          this.$refs.bannerImage.clearIntervalImage()
          this.$refs.about.show = true
          break
        case 2:
          // 离开第一张关闭背景轮播
          this.$refs.bannerImage.clearIntervalImage()
          this.$refs.skill.show = true
          break
        case 3:
          // 离开第一张关闭背景轮播
          this.$refs.bannerImage.clearIntervalImage()
          this.$refs.experience.show = true
          break
        case 4:
          // 离开第一张关闭背景轮播
          this.$refs.bannerImage.clearIntervalImage()
          this.$refs.works.show = true
          break
        case 5:
          // 离开第一张关闭背景轮播
          this.$refs.bannerImage.clearIntervalImage()
          this.$refs.contactme.show = true
          break
      }
    },
    resize () {
      this.resizeFn()
      window.addEventListener('resize', this.resizeFn)
    },
    resizeFn () {
      const width = Math.min(screen.width, window.innerWidth)
      if (width < 600) {
        this.$refs.about.show = true
        this.$refs.skill.show = true
        this.$refs.experience.show = true
        this.$refs.works.show = true
        this.$refs.contactme.show = true
        if (!this.flag) {
          this.flag = true
          this.$refs.bannerImage.clearIntervalImage()
          this.$refs.fullpage.api.destroy('all')
        }
      } else {
        if (this.flag) {
          this.flag = false
          this.$refs.bannerImage.clearIntervalImage()
          this.$nextTick(() => {
            this.click()
          })
        }
      }
    }
  },
  computed: {
    ...mapState(['isPC'])
  },
  components: {
    Navigation,
    Home,
    BannerImage,
    About,
    Skill,
    Experience,
    Works,
    ContactMe
  }
}
</script>

<style lang="less" scoped>
.section {
  width: 100%;
  position: relative;
  overflow: hidden;
  &:nth-child(odd) {
    background-color: #eee;
  }
  &:nth-child(even) {
    background-color: #fff;
  }
  &:first-child {
    background-color: transparent;
  }
  &.section1 {
    height: 100vh;
    overflow: hidden;
  }
}

</style>
